<template>
  <view style="background: #f4f7fb" class="view-page">
    <!-- <top-nav :navbar-data="navbarData" v-if="showTopNav"></top-nav> -->
    <view
      class="nav-bar"
      :style="[{ height: navHeight + 'px', background: isSticky ? '#ffffff' : 'rgba(255,255,255, 0)', position: isSticky ? 'relative' : 'absolute' }]"
      v-if="showTopNav"
    >
      <view class="nav-left-box" @click="$navBack()"
                :data-spmCntSuffix="'.navBack@'"
                :data-custom="1"
                :data-spm="{'pos': '返回'}">
          <uni-icons type="back" color="#111111" size="24"></uni-icons>
      </view>
      <text class="nav-title" v-if="isSticky">{{navbarData.title}}</text>
    </view>
    <warnTop  :offHeight="navHeight" @closeCog="closeCog" v-if="distributionProductId"></warnTop>
    <scroll-view
      v-if="poiDetail"
      :scroll-y="true"
      class="page-content"
      style="margin-top: -1rpx"
      :scrollIntoView="scrollIntoView"
      @scroll="handleScroll"
    >
      <!-- 轮播banner -->
      <view style="height: 470rpx; position: relative">
        <swiper-dot
          :current="current"
          :dotLength="poiDetail.pictureSummaries && poiDetail.pictureSummaries.length"
        >
          <swiper
            style="height: 470rpx"
            :interval="3000"
            duration="500"
            :circular="false"
            @change="handleSwiperChange"
          >
            <swiper-item
              v-for="(item, index) in poiDetail.pictureSummaries"
              :key="index"
            >
              <image
                class="POI-IMG"
                v-if="item.type == 'img'"
                :src="item.url"
                mode="aspectFill"
                @click="handlePreviewImage()"
                :data-spmCntSuffix="'.handlePreviewImage@'"
                :data-custom="1"
                :data-spm="{'pos': 'previewImage'}"
              ></image>
              <video
                v-else-if="item.type == 'mp4'"
                :id="'myVideo_' + index"
                :src="item.url"
                :poster="item.coverImage"
                :autoplay="false"
                class="POI-IMG"
                :muted="!isVolumeSwitch"
                :data-index="index"
                :controls="false"
                :show-fullscreen-btn="false"
                :show-center-play-btn="false"
              ></video>
              <view
                v-if="item.type == 'mp4'"
                class="play-icon-box"
                @click="tapVideoHover(item.state)"
                :data-spmCntSuffix="'.tapVideoHover@'"
                :data-custom="1"
                :data-spm="{'pos': 'tapVideoHover'}"
              >
                <image
                  class="play-image"
                  v-if="item.state != 'continue'"
                  src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/play_video-td.png"
                ></image>
              </view>
              <view
                class="audio-size-icon"
                :style="'top: calc('+ navHeight + 'px - 56rpx - 12rpx)'"
                v-if="item.type == 'mp4'"
                @click="handleVolumeSwitch"
                :data-spmCntSuffix="'.handleVolumeSwitch@'"
                :data-custom="1"
                :data-spm="{'pos': 'mp4handleVolumeSwitch'}"
              >
                <image
                  class="switch-icon"
                  :class="{ 'switch-no': isVolumeSwitch }"
                  :src=" isVolumeSwitch 
                      ? 'https://cdn1.visiotrip.com/h5AndMini/2023-07-31/aut68@2x.png'
                      : 'https://cdn1.visiotrip.com/h5AndMini/2023-07-31/aut@2x.png'"
                ></image>
              </view>
            </swiper-item>
          </swiper>
        </swiper-dot>
        <view class="swiper-dot-td" >{{ Number(current + 1) }}/{{poiDetail.pictureSummaries.length || 0 }}</view>
      </view>
      <!-- POI信息 -->
      <POIInfo :poiDetail="poiDetail" :poiId="poiId"></POIInfo>
      <!-- 管家信息 -->
      <view class="chat-box" v-if="poiDetail.resArticleList && poiDetail.resArticleList.length > 0">
        <view class="chat-title">
          <view class="title-item">游玩攻略</view>
        </view>
        <view class="chat-scroll">
          <view
            class="scroll-item"
            v-for="(item,index) in poiDetail.resArticleList"
            :key="index"
            @click="articleClick(item)"
            :data-spmCntSuffix="'.articleClick@'"
            :data-custom="index + 1"
            :data-spm="item"
          >
            <img class="scroll-img" :src="item.coverImage" mode="aspectFill">
            <view class="mask-model omit1" style="display: unset">{{item.title}}</view>
          </view>
        </view>
      </view>
      <!-- 商品信息 ball别删，用于监控是否吸顶-->
      <view class="ball" id="ball" style="height: 1rpx;width: 100%;"></view>
      <view class="product-list-box">
        <view v-if="!poiDetail.showIntroduction" :class="{'is-sticky':isSticky}">
          <view class="product-flex-top" :style="{paddingTop:closeCogFlag||!distributionProductId  ? 0 : '68rpx'}">
            <view class="list-tab-box" v-if="isSticky && menu.length > 0">
              <block v-for="(item, index) in menu" :key="index">
                <view class="list-tab" @click="topTabClick(item, index)"
                :data-spmCntSuffix="'.topTabClick@'"
                :data-custom="index"
                :data-spm="item">
                  <view
                    class="tab-name"
                    :class="{ active: index == tabIndex }"
                    >{{ item.name }}</view
                  >
                  <image
                    v-if="index == tabIndex"
                    src="../../../static/ai/icon/tab_icon.png"
                    class="tab-img"
                  />
                </view>
              </block>
            </view>
            <view class="table-title" v-else>预订商品</view>
            <view
              class="list-date"
              :style="isSticky ? 'margin-bottom: 24rpx' : ''"
              v-if="!poiDetail.showIntroduction"
            >
              <block
                v-for="(item, index) in dateArr"
                :key="index">
              <view
                class="date-box"
                :class="{ active: index == dateIndex }"
                :style="isSticky ? 'background: #F6F6F9' : ''"
                v-if="index < 2"
                @click="dateClick(item, index)"
                :data-spmCntSuffix="'.dateClick@'"
                :data-custom="index"
                :data-spm="item"
              >
                {{ item.showTxt }}
              </view>
              </block>
              <view
                class="date-box"
                :class="{active: dateIndex === 2 || (choseDate && choseDate != dateArr[0].postDate && choseDate != dateArr[1].postDate && choseDate != dateArr[2].postDate)}"
                :style="isSticky ? 'background: #F6F6F9' : ''"
                @click="dateClick({postDate: dateArr[2].postDate}, 2)"
                v-if="
                  dateArr &&
                  dateArr[0]
                "
              >
                {{ (choseDate && choseDate != dateArr[0].postDate && choseDate != dateArr[1].postDate && choseDate != dateArr[2].postDate) ? choseDateObj.MMdd : dateArr[2].showTxt }}
              </view>
              <view
                class="date-box"
                :style="isSticky ? 'background: #F6F6F9' : ''"
                @click="openPop"
                :data-spmCntSuffix="'.openPop@'"
                :data-custom="1"
                :data-spm="{'pos': '更多日期'}">
                更多日期
                <!-- <uni-icons type="forward" color="$sl-color-grey" size="14"></uni-icons> -->
                <image src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-right.png" class="icon" />
              </view>
            </view>
            <view class="reference"></view>
          </view>
        </view>
        <!-- 预定 -->
        <view
          class="class-box"
          v-if="!poiDetail.showIntroduction"
        >
          <!-- <view class="intoView" id="bookProductInto"></view> -->
          <view class="right-box">
            <view class="class-right">
              <!-- 门票 -->
              <block v-if="ticketList.length > 0">
                <view class="scroll-box" id="scrollTicket">
                  <view class="intoView" id="ticketInto"></view>
                  <!-- <view class="class-title" id="0">门票</view> -->
                  <view class="scroll-box-item">
                    <view class="item-box" v-for="(item, index) in ticketList" :key="index">
                      <view class="border-box" v-if="ticketOpen || index < 2" >
                        <view class="class-info-box">
                          <view class="class-title-2">
                            <view class="title-left"></view>
                            <view class="title-txt">{{ item.stdName }}</view>
                          </view>
                          <block 
                            v-for="(productItem, productIndex) in item.supplierProductList"
                            :key="productIndex"
                          >
                              <view class="product-item" >
                                <view
                                  class="ticket-type"
                                  @click="ticketDetail(index,productIndex)"
                                  :data-spmCntSuffix="'.ticketDetail@'"
                                  :data-custom="productIndex"
                                  :data-spm="productItem"
                                >
                                  {{ productItem.supplierProductName }} 
                                </view>
                                <view class="tag-box" >
                                  <text class="tag-text active1"> {{ productItem.cancellationTypeValue }} </text>
                                  <text class="tag-line" v-if="productItem.cancellationTypeValue" >|</text >
                                  <text class="tag-text active2"> {{ productItem.buyTimeBeforeDTO.value }} </text>
                                </view>
                                <view class="bottom-box">
                                  <view class="notes-box">
                                    <view class="sale-number">已售{{ productItem.salesVolume }}</view>
                                    <view style="display: flex;align-items: center">
                                      <text
                                        class="notes"
                                        @click="ticketDetail(index,productIndex)"
                                        :data-spmCntSuffix="'.tagBoxTicketDetail@'"
                                        :data-custom="productItem"
                                        :data-spm="{'pos': '预订须知'}"
                                        >预订须知</text>
                                      <!-- <uni-icons type="forward" color="#0B4D8F" size="12" ></uni-icons> -->
                                      <image src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-right-blue.png" class="icon" />
                                    </view>
                                  </view>
                                  <view class="bottom-box-right">
                                    <view class="price-box">
                                      <view class="mark-box" v-if="productItem.marketPrice">
                                        <view class="mark-1">¥{{ productItem.marketPrice }}</view>
                                      </view>
                                      <view class="sell-box">
                                        <text class="sell-1">{{productItem.salePrice.curreny}}</text>
                                        <text class="sell-2">{{productItem.salePrice.price}}</text>
                                        <text class="sell-3">{{productItem.salePrice.descr}}</text>
                                      </view>
                                    </view>
                                    <view
                                      v-if="productItem.isSell && !productItem.isSellOut"
                                      class="book"
                                      :data-spmCntSuffix="'.toOrderBtn@'"
                                      :data-custom="1"
                                      :data-spm="productItem"
                                      @click="ticketDetail(index,productIndex)"
                                      >预订
                                    </view>
                                    <view
                                      v-if="!productItem.isSell ||productItem.isSellOut"
                                      class="book active"
                                    >不可售</view>
                                  </view>
                                </view>
                              </view>
                          </block>
                        </view>
                      </view>
                    </view>
                    <view
                      class="item-box more"
                      v-if="ticketList.length > 2"
                      @click="() => {ticketOpen = !ticketOpen}"
                      :data-spmCntSuffix="'.ticketOpen@'"
                      :data-custom="1"
                      :data-spm="{'pos': '查看更多'}"
                    >
                      {{!ticketOpen? `查看更多${ticketList.length - 2 }个` :`收起`}}
                      <!-- <uni-icons :type="!ticketOpen ? 'bottom':'top'" color="#666666" size="14"></uni-icons> -->
                      <image :src="!ticketOpen ? 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-bottom.png' : 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-top.png'" class="icon" />
                    </view>
                  </view>
                </view>
              </block>
              <!-- 日游 -->
              <block v-if="tourList.length > 0">
                <view class="scroll-box" id="scrollTour">
                  <view class="intoView" id="tourInto"></view>
                  <view class="class-title" id="1">日游</view>
                  <view class="scroll-box-item">
                    <view class="item-box" v-for="(item, index) in tourList" :key="index">
                      <view class="class-info-box" v-if="tourOpen || index < 2">
                        <view class="class-title-2">
                          <view class="title-left"></view>
                          <view class="title-txt">{{ item.stdName }}</view>
                        </view>
                        <view 
                          class="product-item"
                          v-for="( productItem, productIndex ) in item.supplierProductList"
                          :key="productIndex"
                        >
                          <view class="ticket-type"> {{ productItem.supplierProductName }} </view>
                          <view class="tag-box">
                            <text class="tag-text active1">{{ productItem.cancellationTypeValue }}</text>
                            <text class="tag-line" v-if="productItem.cancellationTypeValue" >|</text >
                            <text class="tag-text active2">{{ productItem.buyTimeBeforeDTO.value }}</text>
                          </view>
                          <view class="bottom-box">
                            <view class="notes-box">
                              <view class="sale-number">已售{{ productItem.salesVolume }}</view>
                              <view style="display: flex;align-items: center">
                                <text 
                                  class="notes"
                                  @click="tourOpenClick(index, productIndex)"
                                  :data-spmCntSuffix="'.tourOpenClick@'"
                                  :data-custom="1"
                                  :data-spm="{'pos': '预订须知'}"
                                  >预订须知</text>
                                <!-- <uni-icons type="forward" color="#0B4D8F" size="12" ></uni-icons> -->
                                <image :src="'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-right-blue.png'" class="icon" />
                              </view>
                            </view>
                            <view class="bottom-box-right">
                              <view class="price-box">
                                <view class="mark-box" v-if="productItem.marketPrice" >
                                  <view class="mark-1"> ¥{{ productItem.marketPrice }} </view>
                                </view>
                                <view class="sell-box">
                                  <text class="sell-1">{{ productItem.salePrice.curreny }}</text>
                                  <text class="sell-2">{{ productItem.salePrice.price }}</text>
                                  <text class="sell-3">{{ productItem.salePrice.descr }}</text>
                                </view>
                              </view>
                              <view
                                v-if="productItem.isSell && !productItem.isSellOut"
                                class="book"
                                :data-spmCntSuffix="'.isSellTourClick@'"
                                :data-custom="1"
                                @click="tourOpenClick(index, productIndex)"
                                >预订</view>
                              <view
                                v-if="!productItem.isSell || productItem.isSellOut"  
                                class="book active"
                                >订完
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view
                      class="item-box more"
                      v-if="tourList.length > 2"
                      @click=" () => { tourOpen = !tourOpen; } "
                      :data-spmCntSuffix="'.moreTourList@'"
                      :data-custom="1"
                      :data-spm="{'pos':'查看更多'}"
                    >
                      {{!tourOpen? `查看更多${tourList.length - 2 }个` :`收起`}}
                      <!-- <uni-icons :type="!tourOpen ? 'bottom':'top'" color="#666666" size="14"></uni-icons> -->
                      <image :src="!tourOpen ? 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-bottom.png' : 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-top.png'" class="icon" />
                    </view>
                  </view>
                </view>
              </block>
              <!-- 直通车 -->
              <block v-if="busList.length > 0">
                <view class="scroll-box" id="scrollBus">
                  <view class="intoView" id="busInto"></view>
                  <view class="class-title" id="2">直通车</view>
                  <view class="scroll-box-item">
                    <view v-for="(item, index) in busList" :key="index">
                      <view class="class-info-box" v-if="busOpen || index < 2">
                        <view
                          class="product-item"
                          v-for="( productItem, productIndex ) in item.supplierProductList" 
                          :key="productIndex"
                        >
                          <view class="class-title-2">{{ productItem.supplierProductName }}</view>
                          <view class="img-info">
                            <image
                              class="hotel-img"
                              :src="productItem.mainPictureUrl"
                              mode="aspectFill"
                            />
                            <view class="hotel-right">
                              <view class="title">{{ productItem.departureTime }}</view>
                              <view class="sale-number" >单程约{{ productItem.travelTime }}</view>
                              <view class="tag-box">
                                <text class="tag-text active1">
                                  {{ productItem.drivingType }}
                                </text>
                                <text class="tag-line" v-if="productItem.drivingType">|</text>
                                <text
                                  class="tag-text active2"
                                  @click="getCarTime(item.stdId,productItem.supplierProductId)"
                                  :data-spmCntSuffix="'.getCarTime@'"
                                  :data-custom="1"
                                  :data-spm="productItem"
                                >时刻表</text>
                                <uni-icons type="forward" color="#666666" size="12"></uni-icons>
                                <text class="tag-line">|</text>
                                <text
                                  class="tag-text active3"
                                  @click="busOpenClick(index, productIndex)"
                                  :data-spmCntSuffix="'.busOpenClick@'"
                                  :data-custom="index"
                                  :data-spm="productItem"
                                  >预订须知</text>
                                <!-- <uni-icons type="forward" color="#0B4D8F" size="12" ></uni-icons> -->
                                <image src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-right-blue.png" class="icon" />
                              </view>
                              <view class="sale-number" >累计销量{{ productItem.salesVolume }}</view>
                            </view>
                          </view>
                          <view class="bottom-box">
                            <view class="sale-number"></view>
                            <view class="bottom-box-right">
                              <view class="price-box">
                                <view class="mark-box" v-if="productItem.marketPrice" >
                                  <view class="mark-1"> ¥{{ productItem.marketPrice }} </view>
                                </view>
                                <view class="sell-box">
                                  <text class="sell-1">{{ productItem.salePrice.curreny }}</text>
                                  <text class="sell-2">{{ productItem.salePrice.price }}</text>
                                  <text class="sell-3">{{ productItem.salePrice.descr }}</text>
                                </view>
                              </view>
                              <view
                                v-if=" productItem.isSell && !productItem.isSellOut "
                                class="book"
                                :data-spmCntSuffix="'.submitPay@'"
                                :data-custom="1"
                                :data-spm="productItem"
                                @click="busOpenClick(index, productIndex)"
                              >预订</view>
                              <view
                                v-if="!productItem.isSell || productItem.isSellOut"
                                class="book active"
                                >订完
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view
                      class="item-box more"
                      v-if="!busOpen && busList.length > 2"
                      @click="() => {busOpen = true;}"
                      :data-spmCntSuffix="'.busOpenMore@'"
                      :data-custom="1"
                      :data-spm="{'pos': '查看更多'}"
                    >
                      查看更多{{ busList.length - 2 }}个
                      <!-- <uni-icons
                        type="bottom"
                        color="#666666"
                        size="14"
                      ></uni-icons> -->
                      <image :src="!busOpen ? 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-bottom.png' : 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-top.png'" class="icon" />
                    </view>
                  </view>
                </view>
              </block>
              <!-- 餐券 -->
              <block v-if="restaurantList.length > 0">
                <view class="scroll-box" id="scrollRestaurant">
                  <view class="intoView" id="restaurantInto"></view>
                  <view class="class-title" id="2">餐券</view>
                  <view class="scroll-box-item">
                    <view class="item-box" v-for="(item, index) in restaurantList" :key="index">
                      <view class="class-info-box" v-if="restaurantList || index < 2">
                        <view class="class-title-2">
                          <view class="title-left"></view>
                          <view class="title-txt">{{ item.stdName }}</view>
                        </view>
                        <view 
                          class="product-item"
                          v-for="( productItem, productIndex ) in item.supplierProductList"
                          :key="productIndex"
                        >
                          <view class="ticket-type"> {{ productItem.supplierProductName }} </view>
                          <view class="tag-box">
                            <text class="tag-text active1">{{ productItem.cancellationTypeValue }}</text>
                            <text class="tag-line" v-if="productItem.cancellationTypeValue" >|</text >
                            <text class="tag-text active2">{{ productItem.buyTimeBeforeDTO.value }}</text>
                          </view>
                          <view class="bottom-box">
                            <view class="notes-box">
                              <view class="sale-number">已售{{ productItem.salesVolume }}</view>
                              <view style="display: flex;align-items: center">
                                <text 
                                  class="notes"
                                  @click="restaurantOpenClick(index, productIndex)"
                                  :data-spmCntSuffix="'.restaurantOpenClick@'"
                                  :data-custom="1"
                                  :data-spm="{'pos': '预订须知'}"
                                  >预订须知</text>
                                <!-- <uni-icons type="forward" color="#0B4D8F" size="12" ></uni-icons> -->
                                <image :src="'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-right-blue.png'" class="icon" />
                              </view>
                            </view>
                            <view class="bottom-box-right">
                              <view class="price-box">
                                <view class="mark-box" v-if="productItem.marketPrice" >
                                  <view class="mark-1"> ¥{{ productItem.marketPrice }} </view>
                                </view>
                                <view class="sell-box">
                                  <text class="sell-1">{{ productItem.salePrice.curreny }}</text>
                                  <text class="sell-2">{{ productItem.salePrice.price }}</text>
                                  <text class="sell-3">{{ productItem.salePrice.descr }}</text>
                                </view>
                              </view>
                              <view
                                v-if="productItem.isSell && !productItem.isSellOut"
                                class="book"
                                :data-spmCntSuffix="'.isSellTourClick@'"
                                :data-custom="1"
                                @click="restaurantOpenClick(index, productIndex)"
                                >预订</view>
                              <view
                                v-if="!productItem.isSell || productItem.isSellOut"  
                                class="book active"
                                >订完
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view
                      class="item-box more"
                      v-if="restaurantList.length > 2"
                      @click=" () => { restaurantOpen = !restaurantOpen; } "
                      :data-spmCntSuffix="'.moreTourList@'"
                      :data-custom="1"
                      :data-spm="{'pos':'查看更多'}"
                    >
                      {{!restaurantOpen? `查看更多${restaurantList.length - 2 }个` :`收起`}}
                      <image :src="!restaurantOpen ? 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-bottom.png' : 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-top.png'" class="icon" />
                    </view>
                  </view>
                </view>
              </block>
              <!-- 权益券 -->
              <block v-if="equityList.length > 0">
                <view class="scroll-box" id="scrollEquity">
                  <view class="intoView" id="equityInto"></view>
                  <view class="class-title" id="3">套餐</view>
                  <view class="scroll-box-item">
                    <view class="item-box" v-for="(item, index) in equityList" :key="index">
                      <view class="class-info-box" v-if="equityOpen || index < 2">
                        <!-- <view class="class-title-2">{{ item.stdName }}</view> -->
                        <view
                          class="product-item"
                          v-for="( productItem, productIndex ) in item.supplierProductList"
                          :class="{ active: productIndex == item.supplierProductList.length - 1, }"
                          :key="productIndex"
                        >
                          <!-- <view> {{ productItem.supplierProductName }}</view> -->
                          <view class="ticket-type"> {{ productItem.supplierProductName }} </view>
                          <view class="tag-box">
                            <text class="tag-text active1">{{ productItem.cancellationTypeValue }}</text>
                            <text class="tag-line" v-if="productItem.cancellationTypeValue" >|</text >
                            <text class="tag-text active2">{{ productItem.buyTimeBeforeDTO.value }}</text>
                          </view>
                          <view class="bottom-box">
                            <view class="notes-box">
                              <view class="sale-number">已售{{ productItem.salesVolume }}</view>
                              <view style="display: flex;align-items: center">
                                <text 
                                  class="notes"
                                  @click="tourOpenClick(index, productIndex)"
                                  :data-spmCntSuffix="'.tourOpenClick@'"
                                  :data-custom="1"
                                  :data-spm="{'pos': '预订须知'}"
                                  >预订须知</text>
                                <!-- <uni-icons type="forward" color="#0B4D8F" size="12" ></uni-icons> -->
                                <image :src="'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-right-blue.png'" class="icon" />
                              </view>
                            </view>
                            <view class="bottom-box-right">
                              <view class="price-box">
                                <view class="mark-box" v-if="productItem.marketPrice" >
                                  <view class="mark-1"> ¥{{ productItem.marketPrice }} </view>
                                </view>
                                <view class="sell-box">
                                  <text class="sell-1">{{ productItem.salePrice.curreny }}</text>
                                  <text class="sell-2">{{ productItem.salePrice.price }}</text>
                                  <text class="sell-3">{{ productItem.salePrice.descr }}</text>
                                </view>
                              </view>
                              <view
                                v-if="productItem.isSell && !productItem.isSellOut"
                                class="book"
                                :data-spmCntSuffix="'.isSellEquityClick@'"
                                :data-custom="1"
                                @click="equityOpenClick(index, productIndex)"
                                >预订</view>
                              <view
                                v-if="!productItem.isSell || productItem.isSellOut"  
                                class="book active"
                                >订完
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>

                    <view
                      class="item-box more"
                      v-if="equityList.length > 2 && !equityOpen"
                      @click="() => {equityOpen = true;}"
                      :data-spmCntSuffix="'.equityList@'"
                      :data-custom="1"
                      :data-spm="{'pos': '查看更多'}"
                    >
                      查看更多{{ equityList.length - 2 }}个
                      <!-- <uni-icons
                        type="bottom"
                        color="#666666"
                        size="14"
                      ></uni-icons> -->
                      <image :src="!equityOpen ? 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-bottom.png' : 'https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-top.png'" class="icon" />
                    </view>
                  </view>
                </view>
              </block>
            </view>
          </view>
        </view>
        <!-- 推荐 -->
        <view id="recommendationData" class="scroll-box" style="margin-top: 10rpx">
          <view class="intoView" id="recommendationDataInto"></view>
          <view class="table-title" v-if="recommendationData && recommendationData.length > 0">周边推荐</view>
          <correlationProduct
            @tapHandle="tapHandle"
            :list="recommendationData"
            :viewHeight="windowHeight - navHeight - 95"
          ></correlationProduct>
        </view>
        <block v-if="false">
          <view class="table-title">景点介绍</view>
          <view style="padding: 0 30rpx 30rpx 30rpx" class="notice-box">
            <view
              class="scroll-view"
              v-for="(item, index) in poiDetail.introductionResponseList"
              :key="index"
              :id="item.type"
            >
              <view class="notice-content" v-if="item.type == 1">
                <view class="notice-txt">
                  <rich-text :nodes="item.text"></rich-text>
                </view>
              </view>
              <view
                class="notice-content"
                v-if="item.type == 2 && item.text.business.length > 0"
              >
                <view class="notice-title">{{ item.title }}</view>
                <view class="notice-txt">
                  <view
                    class="int-flex-box"
                    v-for="(cItem, cIndex) in item.text.business"
                    :key="cIndex"
                  >
                    <view class="int-flex-box-title">{{ cItem.title }}</view>
                    <view class="int-flex-box-content">
                      <view
                        class="sItem-box"
                        v-for="(sItem, sIndex) in cItem.weekInfo"
                        :key="sIndex"
                      >
                        <view class="sItem-1">{{ sItem.time }}</view>
                        <view class="sItem-2"
                          >{{ sItem.begin }}
                          <text
                            style="padding: 0 5rpx"
                            v-if="sItem.begin && sItem.end"
                            >~</text
                          >
                          {{ sItem.end }}&nbsp;&nbsp;&nbsp;{{ sItem.desc }}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="notice-content" v-if="item.type == 3">
                <view class="notice-title">{{ item.title }}</view>
                <view class="notice-txt">
                  <view
                    class="int-flex-box"
                    v-for="(cItem, cIndex) in item.text"
                    :key="cIndex"
                  >
                    <view class="int-flex-box-title">{{ cItem.customDesc }}</view>
                    <view class="int-flex-box-content">
                      <view
                        class="sItem-box"
                        v-for="(sItem, sIndex) in cItem.policyDetail"
                        :key="sIndex"
                      >
                        <view class="sItem-1">{{ sItem.policyDesc }}</view>
                        <view class="sItem-2">{{ sItem.limitation }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="notice-content" v-if="item.type == 4">
                <view class="notice-title">{{ item.title }}</view>
                <view class="notice-txt">
                  <view
                    class="int-flex-box"
                    v-for="(cItem, cIndex) in item.text"
                    :key="cIndex"
                  >
                    <view class="int-flex-box-title">{{ cItem.type }}</view>
                    <view class="int-flex-box-content">
                      <view
                        class="sItem-box"
                        v-for="(sItem, sIndex) in cItem.details"
                        :key="sIndex"
                      >
                        <view class="sItem-1">{{ sItem.title }}</view>
                        <view class="sItem-2">{{ sItem.content }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="notice-content" v-if="item.type == 5">
                <view class="notice-title">{{ item.title }}</view>
                <view class="notice-txt">
                  <view
                    class="int-flex-box"
                    v-for="(cItem, cIndex) in item.text"
                    :key="cIndex"
                  >
                    <view class="int-flex-box-title">{{ cItem.title }}</view>
                    <view class="int-flex-box-content">
                      <view class="sItem-box">
                        <!-- <view class="sItem-1">{{ sItem.title }}</view> -->
                        <view class="sItem-2">{{ cItem.contents }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
        <view :style="{ height: '100rpx', width: '100%'}" ></view>
        <hotelReserve
          v-if="false"
          :viewHeight="windowHeight - navHeight - 95"
        ></hotelReserve>
        <!-- 客服 -->
        <!-- <customerService></customerService> -->
        <movable-area class="movable-po" v-if="poiDetail.hasProduct">
          <movable-view x="600" y="600" :out-of-bounds="true" class="po-top-r" :class="{'active':scrolled}" direction="vertical">
              <!-- <button  open-type="contact" ></button> -->
              <img 
                :src="!scrolled ? chatAIImg : chatAIImg2" 
                :data-spmCntSuffix="'.PoiQA'"
                :data-custom="1"
                :data-spm="{'pos': '管家咨询'}" 
                class="po-button" 
                :class="{'active':scrolled}"
                @click="aiClick">
          </movable-view>
        </movable-area>
      </view>
      <!-- 须知弹框 -->
      <uni-popup
        ref="instructions"
        type="bottom"
        :safe-area="false"
      >
        <inspirationPop
          ref="inspirationPop"
          @closePop="closePop"
          :instructionsData="instructionsData"
          :paramsData="paramsData"
          @buyFun="buyFun"
        >
        </inspirationPop>
      </uni-popup>
    </scroll-view>
    <!-- 日历弹框 -->
    <uni-popup ref="calendar" type="bottom" :safe-area="false">
      <view class="calendarBox">
        <calendar
          :is-show="true"
          :startDate="choseDate"
          :betweenEnd="endDate"
          :theme-color="'#7696FF'"
          @callback="calendarChange"
          :isShowTitle="false"
        >
          <template v-slot:header>
            <view class="calendarTitle">
              <view>选择日期</view>
            </view>
          </template>
        </calendar>
      </view>
    </uni-popup>
    <!-- 更多门票弹框 -->
    <uni-popup ref="moreOpen" type="bottom" :safe-area="false">
      <view class="more-popup">
        <view class="calendarTitle">
          <view>{{ moreTitle }}</view>
        </view>
        <scroll-view class="more-scroll-view" scroll-y>
          <view
            class="moreBox"
            v-for="(item, index) in moreData"
            @click="moreTicketClick(index)"
            :data-spmCntSuffix="'.moreTicketClick@'"
            :data-custom="index"
            :data-spm="item"
            :key="index"
          >
            {{ item.supplierProductName }}
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <commonPopup
      ref="lineBox"
      :showSureBtn="false"
      :showClose="true"
      :title="'路线时刻表'"
    >
      <view style="padding: 0 40rpx">
        <lineDetailVue :lineData="lineData"></lineDetailVue>
      </view>
    </commonPopup>
    <uni-popup ref="ticketsDetailPopup" type="bottom" :safe-area="false">
      <TicketsDetail
        ref="ticketsDetail"
        :instructionsData="ticketsDetail"
        :paramsData="paramsData"
        @closePop="closePop"
        @buyFun="buyFun"
      ></TicketsDetail>
    </uni-popup>
  </view>
</template>

<script>
import topNav from "../components/topNavBar/index.vue";
import inspirationPop from "../components/instructionsPop/instructionsPop.vue";
import datePicker from "../../../uni_modules/date-picker/components/date-picker/date-picker.vue";
import Calendar from "../components/Calendar.vue";
import commonPopup from "../components/commonPopup/index.vue";
import lineDetailVue from "../components/lineDetail/lineDetail.vue";
import customerService from "../components/customerService/customerService.vue";
import warnTop from "../components/warnTop/warnTop.vue"
import POIInfo from "../components/POIInfo/POIInfo.vue";
import correlationProduct from "../components/correlationProduct/correlationProduct.vue";
import hotelReserve from "../components/hotelReserve/hotelReserve.vue";
import TicketsDetail from "../components/ticketsDetail/ticketsDetail.vue";
import { getWechatAppletShareInfo, getClothes } from '../serve/api.js';
const globalData = uni.getStorageSync("globalData");
// import pointData from "../utils/point.js"
let observer;
let observer2 = null;
export default {
  props: {},
  components: {
    topNav,
    warnTop,
    POIInfo,
    correlationProduct,
    // POIrecommend,
    hotelReserve,
    inspirationPop,
    datePicker,
    Calendar,
    commonPopup,
    lineDetailVue,
    TicketsDetail,
    customerService,
  },
  computed: {
    ticketList: {
      //门票
      get() {
        let list = this.poiDetail ? this.poiDetail?.ticketList : [];
        return list;
      },
      set(value) {},
    },
    tourList: {
      //日游
      get() {
        let list = this.poiDetail ? this.poiDetail?.tourList : [];
        return list;
      },
    },
    busList: {
      //直通车
      get() {
        let list = this.poiDetail ? this.poiDetail?.busList : [];
        return list;
      },
    },
    equityList: {
      //权益券
      get() {
        let list = this.poiDetail ? this.poiDetail?.equityList : [];
        return list;
      },
    },
    restaurantList: {
      get() {
        let list = this.poiDetail ? this.poiDetail?.restaurantList : [];
        return list;
      }
    },
    menu: {
      get() {
        let arr = [
          {
            key: "ticketList",
            name: "景点门票",
            id: "scrollTicket",
            intoId: "ticketInto",
            productType:'01'
          },
          {
            key: "tourList",
            name: "日游",
            id: "scrollTour",
            intoId: "tourInto",
            productType:'07'
          },
          {
            key: "restaurantList",
            name: "餐券",
            id: "scrollRestaurant",
            intoId: "restaurantInto",
            productType:'03'
          },
          {
            key: "equityList",
            name: "套餐",
            id: "scrollEquity",
            intoId: "equityInto",
            productType:'13'
          },
          {
            name: "周边推荐",
            type: 3,
            id: 'recommendationData',
            intoId: 'recommendationDataInto'
          },
        ];
        let menuArr = [];
        for (var i = 0; i < arr.length; i++) {
          for (let item in this.poiDetail) {
            //item是对象属性名 name,age,job,hobby
            if (item == arr[i].key && this.poiDetail[item].length > 0) {
              menuArr.push(arr[i]);
            }
          }
        }
        if (this.recommendationData.length > 0) {
          menuArr.push({
            name: "周边推荐",
            type: 3,
            id: 'recommendationData',
            intoId: 'recommendationDataInto'
          });
        }
        // for(var i=0;i<menuArr.length;i++){
        //   if(this.poiDetail.productType === menuArr[i].productType){
        //     this.categoryTabIndex = i
        //   }
        // }
        // console.log('this.categoryTabIndex', this.categoryTabIndex);
        console.log('menuarr', menuArr);
        return menuArr;
      },
    },
  },
  data() {
    return {
      // 导航头组件所需的参数
      navbarData: {
        //是否显示左上角图标   1表示显示    0表示不显示
        showCapsule: 1,
        //导航栏 中间的标题
        title: "",
        //导航栏 中间的标题是否显示
        showTitle: true,
        // 导航栏是否透明
        isOpacity: 1,
        bgImg: false,
      },
      windowHeight: 0,
      closeCogFlag:false,
      navHeight: 0,
      navTop: 0,
      tabIndex: 0,
      tabList: [],
      scrollIntoView: undefined,
      poiId: "",
      poiDetail: null,
      dateArr: [],
      dateIndex: -1,
      showCalendar1: false,
      choseDate: "",
      endDate: '',
      recommendationData: [], //推荐列表
      instructionsData: "",
      moreData: [],
      moreTitle: "更多",
      ticketIndex: 0,
      choseDateObj: "", //选中日期对象
      showTopNav: true,
      lineData: "",
      ticketIndex: 0, //选择门票下标
      equityOpen: false,
      busOpen: false,
      ticketOpen: false,
      tourOpen: false,
      restaurantOpen: false,
      categoryTabIndex: 0,
      scrollTicketHeight: 0,
      categoriesOnScreen: new Set(),
      ticketsDetail: "",
      current: 0,
      isVolumeSwitch: false, // 默认静音
      paramsData: {},
      distributionProductId:false,
      tabType: 1,
      shareData:{
        distributorId:'',
        shareTokenId:''
      },
      optionsData:'',
      parentSpm: {
        ref: "",
        pre: "",
      },
      enterTime: new Date(),
      chatAIImg: '',
      chatAIImg2: '',
      isSticky: false,
      scrolled: false,
      scrollTimeout: null,
      isManualSelect: false,
      isInstruOpen: false, // 预订须知是否打开
    };
  },
  mounted() {
    let date = new Date(Date.parse(new Date()) + (86400000 * 90))
    this.year = date.getFullYear()
    this.month = date.getMonth() + 1
    this.day = date.getDate()
    this.endDate = this.year + "-" + this.month + "-" + this.day
    setTimeout(() => {
      this.createObserver();
      // this.createObserver2();
    }, 1000);
  },
  async onLoad(options) {
    console.log("收到DSP分享", decodeURIComponent(options.scene));
    if (this.$store.$state && this.$store.$state.parentSpm) {
      this.parentSpm = this.$store.$state.parentSpm; // 获取页面来源页信息
    }
    if (this.$store.state && this.$store.state.parentSpm) {
      this.parentSpm = this.$store.state.parentSpm; // 获取页面来源页信息
    }
    this.optionsData = options
    // app二维码分享跳转
    if (options?.scene) {
      let sceneList = decodeURIComponent(options.scene).split('=');
      console.log('sceneList', sceneList);
      await this.$aiRequest({
        url: "/app/share/getWechatPageParam",
        method: "POST",
        params: {
          shareToken: sceneList[1],
          version: '1.0.0'
        },
      }).then((res) => {
        if (res.success) {
          this.scanRecordNew(options);
          this.poiId = res.data.poiId ?? res.data.id;
          this.distributionProductId = res.data.distributionProductId
          this.optionsData.distributionProductId = res.data.distributionProductId;
          this.loadRequest();
        } else {
          uni.showToast({
            title: res.errMsg,
            icon: "none",
            duration: 2000,
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        }
      });
    } else if (options?.shareTokenId) {
      this.scanRecordNew(options);
      this.poiId = options.poiId;
      this.loadRequest();
    } else {
      this.$nextTick(() => {
        this.poiId = options.poiId;
        this.loadRequest();
      });
    }

    if(options?.distributionProductId){
      this.distributionProductId = true;
    }
  },
  methods: {
    // 关闭警示触发
    closeCog(flag){
      this.closeCogFlag = flag
    },
    // 预览图片
    handlePreviewImage() {
      let urls = [];
      this.poiDetail.pictureSummaries.forEach((e) => {
        if (e.type !== "mp4") {
          urls.push(e.url);
        }
      });
      uni.previewImage({
        urls,
      });
    },
    // 播放和暂停
    tapVideoHover(state) {
      this.myVideoContext = uni.createVideoContext(
        "myVideo_" + this.current,
        this
      );
      if (state != "continue" || state == undefined) {
        this.myVideoContext.play(); //暂停以后继续播放
        this.poiDetail.pictureSummaries[this.current].state = "continue";
        this.$forceUpdate();
      } else if (state != "pause") {
        this.myVideoContext.pause(); //暂停以后继续播放
        this.poiDetail.pictureSummaries[this.current].state = "pause";
        this.$forceUpdate();
      }
    },
    handleVolumeSwitch() {
      this.isVolumeSwitch = !this.isVolumeSwitch;
    },
    handleSwiperChange(obj) {
      this.current = obj.target.current;
    },
    onAppShare() {
      let shareObj = {
        contentType: "POI",
        poiId: this.poiId,
        poiType: this.poiDetail?.poiTypeId,
        productType: this.options.productType,
        stdProductIdId: this.options.stdId,
        supplierProductId: this.options.supplierProductId,
      };
      this.$bridge.appShare(shareObj);
    },
    createObserver() {
      console.log("添加监控");
      if (observer) {
        observer.disconnect();
        observer = undefined;
      }
      observer = uni
        .createIntersectionObserver(this, {
          observeAll: true,
          thresholds: [0, 0.001],
        })
        .relativeTo(".page-content", { top: -87 })
        .observe(".ball", (res) => {
          const { intersectionRatio } = res;
          if (intersectionRatio > 0) {
            console.log("不吸顶");
            this.isSticky = false
          } else {
            console.log("吸顶");
            this.isSticky = true
          }
        });
    },
    createObserver2() {
      console.log("添加监控2");
      if (observer2) {
        observer2.disconnect();
        observer2 = undefined;
      }
      observer2 = uni
        .createIntersectionObserver(this, {
          observeAll: true,
          thresholds: [0, 0.001],
        })
        .relativeTo(".page-content", { top: -87 })
        .observe(".scroll-box", (res) => {
          if (this.isManualSelect) return; // 如果是手动选择，则不触发
          const { intersectionRatio, id } = res;
          const categoryTabIndex = this.leftIndexOfId(id);
          if (intersectionRatio > 0) {
            this.categoriesOnScreen.add(categoryTabIndex);
          } else {
            this.categoriesOnScreen.delete(categoryTabIndex);
          }
          // 处理边界情况
          if (this.categoriesOnScreen.size > 0) {
            let min = Math.min(...this.categoriesOnScreen);
            console.log("监控到变化", min, res, ...this.categoriesOnScreen);
            this.tabIndex = isFinite(min) ? min : 0;
          } else {
            this.tabIndex = 0; // 设置默认值
          }
        });
    },
    loadRequest() {
      this.getFromDate();
      uni.setStorageSync("poiId", this.poiId);
      this.getPoiDetail();
      this.getClineHeight();
    },
    closePop() {
      this.showTopNav = true;
      this.$refs.instructions.close();
      this.isInstruOpen = false;
      this.$refs.ticketsDetailPopup.close();
    },
    openPop() {
      this.$refs.calendar.open();
    },
    instructionsOpen(data) {
      if (!data) {
        uni.showToast({
          title: "暂无预订须知",
          icon: "none",
        });
        return;
      }
      let showData = data;
      this.instructionsData = showData;
      this.$refs.instructions.open();
      this.isInstruOpen = true;
      this.showTopNav = false;
      setTimeout(() => {
        this.$refs.inspirationPop.init();
      }, 100);
    },
    topTabClick(item, index) {
      this.isManualSelect = true
      console.log('item', item, index);
      this.tabIndex = index;
      this.scrollIntoView = item.intoId
      // 延迟重置标志位
        setTimeout(() => {
          this.isManualSelect = false; // 重置标志位
        }, 300); // 根据需要调整延迟时间
    },
    // 获取数字人
    async getAiIconFun(destId) {
      let res = await getClothes(destId)
      if (res.data) {
        this.chatAIImg = res.data.detailGif
        this.chatAIImg2 = res.data.detailSmallGif
      }
    },
    async getPoiDetail() {
      let params = {
        destId: this.optionsData.destId ? this.optionsData.destId : uni.getStorageSync("destItem").destinationId,
        poiId: this.poiId,
        date: this.choseDate,
        deviceId: "",
        lat: "",
        lon: "",
        subSceneId: "",
        userId: "",
        distributionProductId: this.optionsData.distributionProductId ||'',
        supplierProductId: this.optionsData.supplierProductId || ''
      };
      let res = await this.$aiRequest({
        url: "/poi/new/detailNew",
        method: "POST",
        params,
      });
      if (res.data) {
        this.getAiIconFun(res.data.destId)
        let list = res.data.ticketList.length > 0 ? res.data.ticketList : [];
        for (var i = 0; i < list.length; i++) {
          for (var k = 0; k < list[i].supplierProductList.length; k++) {
            if (k == 0) {
              list[i].supplierProductList[k].chose = true;
            } else {
              list[i].supplierProductList[k].chose = false;
            }
          }
        }
        this.poiDetail = res.data;
        this.navbarData.title = res.data.poiTitle;
        this.peripheralRecommendation(res.data.showIntroduction);
        this.getShareTokenByBizId(res.data.poiTypeId);
      }else {
        uni.showToast({
          title: res.errMsg,
          icon: "none",
          duration: 3000,
        });
      }
    },

    //日期选择
    dateClick(item, index) {
      if (index == 2 && this.choseDate && this.choseDate != this.dateArr[2].postDate && this.choseDate != this.dateArr[0].postDate && this.choseDate != this.dateArr[1].postDate) {
        return;
      }
      this.dateIndex = index;
      this.choseDate = item.postDate;
      this.getPoiDetail();
    },
    setDate(date) {
      //获取年份
      var Y = date.getFullYear();
      //获取月份
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //获取当日日期
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return { Y, M, D };
    },
    getFromDate() {
      var date = new Date();
      let dateArr = [];
      for (var i = 0; i < 3; i++) {
        // date.setTime(date.getTime() + 24 * i * 60 * 60 * 1000)
        if (i == 0) {
          date.setTime(date.getTime());
          dateArr.push({
            postDate: `${this.setDate(date).Y}-${this.setDate(date).M}-${
              this.setDate(date).D
            }`,
            showTxt: "订今日",
            date: `${this.setDate(date).Y}-${this.setDate(date).M}-${
              this.setDate(date).D
            }`,
          });
        } else if (i == 1) {
          date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
          dateArr.push({
            postDate: `${this.setDate(date).Y}-${this.setDate(date).M}-${
              this.setDate(date).D
            }`,
            showTxt: "订明日",
            date: `${this.setDate(date).Y}-${this.setDate(date).M}-${
              this.setDate(date).D
            }`,
          });
        } else {
          date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
          dateArr.push({
            postDate: `${this.setDate(date).Y}-${this.setDate(date).M}-${
              this.setDate(date).D
            }`,
            showTxt: `订${date.getMonth() + 1}月${date.getDate()}日`,
            date: `${this.setDate(date).Y}-${this.setDate(date).M}-${
              this.setDate(date).D
            }`,
          });
        }
      }
      this.dateArr = dateArr;
      console.log('dateArr', dateArr);
      // this.choseDate = dateArr[0].postDate;
    },
    //日历选择
    calendarChange(e) {
      this.dateIndex = -1;
      this.choseDate = e.startStr.dateStr;
      this.choseDateObj = e.startStr;
      for (let i = 0; i < this.dateArr.length; i++) {
        if (this.dateArr[i].postDate == e.startStr.dateStr) {
          this.dateIndex = i;
          break;
        }
      }
      this.$refs.calendar.close();
      this.getPoiDetail();
 
    },
    buyFun(data) {
      this.toOrder(data, data);
    },
    toOrder(e, item) {
      try {
        if (!this.$isLogin()) {
          return;
        }
        let { supplierProductId } = e;
        let { stdId, productType } = item;
        let url
        if (productType == 13) {
          url = '/packageA/pages/hotelSubmit/hotelSubmit'
        } else {
          url = "/packageA/pages/sceneryOrder/sceneryOrder";
        }
        this.$navTo(
          url,
          {
            stdId,
            supplierProductId,
            productType,
            applyDate: JSON.stringify(this.choseDate),
          },
          "navigateTo"
        );
      } catch (e) {
        throw new Error("erroe" + e);
      }
    },
    //获取周边
    async peripheralRecommendation(showTab) {
      let params = {
        destId: uni.getStorageSync("destItem").destinationId,
        poiId: this.poiId,
        date: this.choseDate,
        deviceId: "",
        lat: "",
        lon: "",
        subSceneId: "",
        userId: "",
      };
      let res = await this.$aiRequest({
        url: "/poi/periphery/rec",
        method: "POST",
        params,
      });
      if (res.data) {
        this.recommendationData = res.data;
        setTimeout(() => {
          this.createObserver2();
        }, 200);
      }
    },
    //打开更多门票
    openMore(obj) {
      this.moreData = obj.item?.supplierProductList;
      this.ticketIndex = obj.index;
      this.moreTitle = this.poiDetail?.ticketList[this.ticketIndex].stdName;
      this.$refs.moreOpen.open();
    },
    moreTicketClick(index) {
      this.$refs.recommend.supplierClick(this.ticketIndex, index);
      this.$refs.moreOpen.close();
    },
    getBarHeight() {
      const res = uni.getSystemInfoSync();
      return res.statusBarHeight;
    },
    //获取可视区域高度
    getClineHeight() {
      const res = uni.getSystemInfo({
        success: (res) => {
          this.windowHeight = res.windowHeight - this.getBarHeight() + 20;
        },
      });
    },
    //跳转详情
    tapHandle(item) {
      this.$productUrlJump(item, true);
    },
    //获取时刻表
    async getCarTime(stdId, supplierProductId) {
      let params = {
        dspId: null,
        stdId: stdId,
        supplierProductId: supplierProductId,
      };
      let res = await this.$aiRequest({
        url: "/thbProduct/queryThroughBusResponse",
        method: "POST",
        params,
      });
      if (res.success) {
        this.lineData = res.data.drivingInformationResponseList;
        this.$refs.lineBox.openPopup("bottom");
      }
    },
    supplierClick(index, productIndex) {
      let list = this.ticketList;
      for (var k = 0; k < list[index].supplierProductList.length; k++) {
        list[index].supplierProductList[k].chose = false;
      }
      list[index].supplierProductList[productIndex].chose = true;
      this.ticketIndex = index;
    },
    tabClick(item, index) {
      this.categoryTabIndex = index;
      this.scrollIntoView = item.intoId;
      this.$nextTick(() => {
        // this.scrollIntoView = null;
      });
    },
    leftIndexOfId(id) {
      for (let i = 0; i < this.menu.length; i++) {
        const item = this.menu[i];
        if (item.id === id) {
          return i;
        }
      }
    },
    handleScroll() {
      //页面滚动图标缩小 页面静止4s后恢复默认图标 
      this.scrolled = true;

      if (this.scrollTimeout) {
        clearTimeout(this.scrollTimeout);
        this.scrollTimeout = null
      }

      this.scrollTimeout = setTimeout(() => {
        this.scrolled = false;
      }, 4000);
    },
    //日游跳转详情
    tourClick(e, item) {
      let data = {
        poiId: uni.getStorageSync("poiId"),
        productType: "07",
        productId: item.stdId,
        supplierProductId: e.supplierProductId,
      };
      this.$productUrlJump(data, true);
    },
    // 跳转直通车页面
    async submitPay(e, item) {
      if (!this.$isLogin()) {
        return;
      }
      let { supplierProductId } = e;
      let { stdId } = item;

      //获取日历价
      let params = {
        dspId: null,
        stdId,
        supplierProductId,
      };
      let res = await this.$aiRequest({
        url: "/thbProduct/queryThbProductPriceStock",
        method: "POST",
        params,
      });
      let applyDate = "";
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i].canSell) {
          applyDate = JSON.stringify(res.data[i].date);
          break;
        }
      }
      const url = "/packageNew/pages/createGeneralOrder/createGeneralOrder";
      this.$navTo(
        url,
        {
          stdId,
          supplierProductId,
          dateIndex: 0,
          applyDate,
        },
        "navigateTo"
      );
    },
    //权益券下单
    hotelSubmit(e, item, index) {
      let data = {
        poiId: uni.getStorageSync("poiId"),
        productType: "13",
        productId: item.stdId,
        supplierProductId: e.supplierProductId,
      };
      this.$productUrlJump(data, true);
    },
    async getReservationNotice(params) {
      let res = await this.$reservationNotice(params);
      if (res.success) {
        this.instructionsOpen(res.data);
      } else {
        uni.showToast({
          title: "获取预订须知失败~",
          icon: "none",
        });
      }
    },
    async getTicketDetail(params) {
      let res = await this.$reservationNotice(params);
      if (res.success) {
        this.ticketsDetail = res.data;
        this.paramsData = params;
        // this.$refs.ticketsDetail.setData(this.optionsData)
        // this.$refs.ticketsDetailPopup.open();
        this.instructionsData = res.data;
        this.$refs.instructions.open();
        this.isInstruOpen = true;
        setTimeout(() => {
          this.$refs.inspirationPop.init();
        }, 100);
      } else {
        uni.showToast({
          title: "出错啦~",
          icon: "none",
        });
      }
    },
    //门票详情
    ticketDetail(index1, index2, index3) {
      let params = {
        stdId: this.poiDetail.ticketList[index1].stdId,
        supplierProductId:
          this.poiDetail.ticketList[index1].supplierProductList[index2]
            .supplierProductId,
      };
      this.getTicketDetail(params);
    },
    //门票预订须知
    ticketOpenClick(index1, index2, index3) {
      let params = {
        stdId: this.poiDetail.ticketList[index1].stdId,
        supplierProductId:
          this.poiDetail.ticketList[index1].supplierProductList[index2]
            .supplierProductId,
      };
      this.getTicketDetail(params);
    },
    //日游预订须知
    tourOpenClick(index1, index2) {
      let params = {
        stdId: this.poiDetail.tourList[index1].stdId,
        supplierProductId:
          this.poiDetail.tourList[index1].supplierProductList[index2]
            .supplierProductId,
      };
      this.getTicketDetail(params);
    },
    //直通车预订须知
    busOpenClick(index1, index2) {
      let params = {
        stdId: this.poiDetail.busList[index1].stdId,
        supplierProductId:
          this.poiDetail.busList[index1].supplierProductList[index2]
            .supplierProductId,
      };
      this.getTicketDetail(params);
    },
    //权益券预订须知
    equityOpenClick(index1, index2) {
      let params = {
        stdId: this.poiDetail.equityList[index1].stdId,
        supplierProductId:
          this.poiDetail.equityList[index1].supplierProductList[index2]
            .supplierProductId,
        productType: '13'
      };
      this.getTicketDetail(params);
    },
    //套餐预订须知
    restaurantOpenClick(index1, index2) {
      let params = {
        stdId: this.poiDetail.restaurantList[index1].stdId,
        supplierProductId:
          this.poiDetail.restaurantList[index1].supplierProductList[index2]
            .supplierProductId,
      };
      this.getTicketDetail(params);
    },
    // 生成扫码记录-新
    async scanRecordNew(params){
      await this.$aiRequest({
        url: `/commission/scanRecordNew`,
        method: "POST",
        params
      });
    },
    // 获取分享凭证
    async getShareTokenByBizId(poiType){
      let params = {
        contentType: 'POI',
        poiId:this.poiId,
        poiType,
        supplierProductId: this.optionsData.supplierProductId,
        destId: uni.getStorageSync('destItem').destinationId,
        useDate: this.choseDate,
        version: '1.0.0'
      }
      let res = await getWechatAppletShareInfo(params);
      if(res.success){
        this.shareData = res.data
      }
    },
    /**
     * 发送事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
     postEventData(eventId, eventType, spmCntSuffix, obj) {
      // this.$spmFun(
      //   pointData,
      //   this.getEventObj(eventId, eventType, spmCntSuffix, obj)
      // );
    },
    /**
     * 获取事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
    getEventObj(eventId, eventType, spmCntSuffix, obj) {
      return {
        event_id: eventId,
        event_type: eventType,
        spm_cnt: `${pointData.platform}.PoiDetailsPage.${spmCntSuffix}`,
        spm_pre: this.parentSpm.pre,
        spm_ref: this.parentSpm.ref,
        open_time: this.enterTime.getTime(),
        args: {
          ...obj,
        },
      };
    },
    aiClick(){
      if(this.scrolled){
        // 如果是小图标则放大 
        this.scrolled = false
        return
      }
      if (!this.$isLogin()) {
        return;
      }
      if (this.isInstruOpen) {
        uni.setStorageSync('aiObj', {
          fixedSceneCode: 52,
          productId: this.paramsData.stdId,
          supplierProductId: this.paramsData.supplierProductId,
          productType: this.instructionsData.productType,
          sourceType:'SUPPLIER_PRODUCT',
          poiId: this.optionsData.poiId,
          destId: this.poiDetail.destId,
        })
      } else {
        uni.setStorageSync('aiObj', {
          fixedSceneCode: 52,
          poiId: this.optionsData.poiId,
          sourceType:'POI',
          destId: this.poiDetail.destId,
        })
      }
      uni.setStorageSync('cardType', 'PRE_SALE')
        uni.navigateTo({
          url: "/ai/pages/index",
        });
    },
    articleClick(item){
      console.log('item', item);
      if (item.articleId == -1) {
        this.$navTo(
          "/packageAI/pages/disneyGuideDetail/disneyGuideDetail",
          {},
          "navigateTo"
        );
      } else {
        uni.navigateTo({
          url: '/ai/pages/aiSecretDetail/index?articleId=' + item.articleId + '&hiddenChange=true'
        })
      }
    }
  },
  beforeMount() {
    this.navHeight = globalData.navHeight || 40
    this.navTop = globalData.navTop || 20
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    return this.$shareFun({},`${this.navbarData.title}`, this.shareData.path)
  },
  onShareTimeline: function () {
    return {
      title: `${this.navbarData.title}`,
      path: `/ai/pages/POIDetail/index?poiId=${this.poiId}&shareTokenId=${this.shareData.shareTokenId}&distributorId=${this.shareData.distributorId}`,
      imageUrl: this.poiDetail.introImages[0]
    }
  },
  onShow() {
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;
    this.postEventData("2002", "页面进入", "0.0",options);
  },
  onHide() {
    this.postEventData("2003", "页面离开", "0.0");
  },
};
</script>

<style lang="scss" scoped>


.nav-bar {
  // width: 100%;
  flex-shrink: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  .nav-title {
    font-size: 32rpx;
    color: $sl-color-black;
    line-height: 45rpx;
    z-index: 5;
    position: absolute;
    bottom: 14rpx;
  }
  .nav-bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .nav-left-box {
    position: absolute;
    padding-left: 8rpx;
    padding-top: 6rpx;
    left: 26rpx;
    bottom: 12rpx;
    display: flex;
    width: 60rpx;
    height: 60rpx;
    background: rgba(255,255,255,0.5);
    box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(0,0,0,0.06);
    border-radius: 30rpx;
  }
}
.POI-IMG {
  width: 750rpx;
  height: 470rpx;
}

.audio-size-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: calc(84px - 56rpx - 12rpx);
  left: 470rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .switch-icon {
    width: 30rpx;
    height: 28rpx;
    &.switch-no {
      width: 32rpx;
    }
  }
}

.swiper-dot-td {
  width: 76rpx;
  height: 42rpx;
  background: rgba(17, 17, 17, 0.4);
  border-radius: 21rpx;
  position: absolute;
  z-index: 99;
  right: 20rpx;
  bottom: 54rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  /* font-weight: 600; */
  color: #ffffff;
  line-height: 42rpx;
  text-align: center;
}

// 播放
.play-icon-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .play-image {
    width: 86rpx;
    height: 86rpx;
  }
}

.reference {
  position: absolute;
  height: 1rpx;
  left: 0;
  right: 0;
  bottom: -1;
}
.product-list-box {
  width: 100%;
  background: #F6F6F9;
  display: flex;
  flex-direction: column;
  border-radius: 20rpx 20rpx 0 0;
  .class-box {
    display: flex;
    justify-content: flex-start;
    flex: 1;
    // background: #f8faff;
    // overflow: hidden;

    .class-left {
      width: 125rpx;
      height: 200rpx;

      view {
        height: 80rpx;
        width: 125rpx;
        line-height: 80rpx;
        text-align: center;
        color: $sl-color-grey;
        font-size: 26rpx;
        font-weight: 400;
      }

      view.active {
        border-radius: 0 10rpx 10rpx 0;
        background: $sl-color-btn-background;
        color: #fff;
      }
    }

    .right-box {
      position: relative;
      flex: 1;

      .intoView {
        position: absolute;
        top: -174rpx;
        right: 0;
        left: 0;
        height: 1rpx;
      }

      .class-right {
        flex: 1;
        height: 100%;
        background-color: #F6F6F9;

        .scroll-box {
          position: relative;
          min-height: 100rpx;
          margin-bottom: 10rpx;
          width: 694rpx;
          margin: 0 auto;
          border-radius: 26rpx;
          .class-title {
            font-size: 36rpx;
            color: $sl-color-black;
            padding: 32rpx 0 2rpx 0;
            font-weight: 600;
          }
          .scroll-box-item{
            width: 694rpx;
            // background: #FFFFFF;
            .item-box {
              margin-top: 20rpx;
              background: #fff;
              border-radius: 26rpx;
            }
          }
          .class-info-box {
            // margin-top: 10rpx;
            background: #ffffff;
            border-radius: 26rpx;
            padding-bottom: 14rpx;
            .product-item {
              position: relative;
              width: 650rpx;
              margin: 0 auto;
              padding: 22rpx 0;
            }
            .product-item:not(:last-child) {
              border-bottom: 1rpx solid #EEEEEE;
            }

            .class-title-2 {
              
              border-bottom: 4rpx dashed #EEEEEE;
              min-height: 108rpx;
              display: flex;
              align-items: center;
              .title-left{
                width: 4rpx;
                height: 28rpx;
                background: #C7C8DF;
                border-radius: 4rpx;
              }
              .title-txt{
                font-size: 36rpx;
                color: $sl-color-black;
                font-weight: 700;
                padding-left: 18rpx;
              }
            }

            .bottom-box {
              display: flex;
              justify-content: space-between;
              padding: 18rpx 0 0 0;
              .notes-box{
                display: flex;
                align-items: flex-start;
                .notes{
                  color: #5876D6;
                  font-size: 24rpx;
                  margin-left: 18rpx;
                }
                .icon {
                  width: 24rpx;
                  height: 24rpx;
                }
              }
              
              .bottom-box-right {
                min-width: 250rpx;
                display: flex;
                justify-content: flex-end;

                .price-box {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  text-align: right;

                  .sell-box {
                    padding: 0 11rpx;
                    // display: flex;
                    // align-items: center;

                    .sell-1 {
                      font-size: 24rpx;
                      color: #f93f55;
                      font-weight: 600;
                    }

                    .sell-2 {
                      color: #f93f55;
                      font-size: 36rpx;
                      font-weight: 600;
                    }

                    .sell-3 {
                      color: $sl-color-grey;
                      font-size: 20rpx;
                    }
                  }

                  .mark-box {
                    padding: 0 11rpx;

                    .mark-1 {
                      font-size: 20rpx;
                      color: #999999;
                      text-decoration: line-through;
                    }
                  }
                }

                .book {
                  width: 88rpx;
                  height: 88rpx;
                  background: #7696ff;
                  text-align: center;
                  line-height: 88rpx;
                  border-radius: 10rpx;
                  font-size: 28rpx;
                  color: #ffffff;

                  &.active {
                    background: #bbbbbb;
                    font-size: 26rpx;
                  }
                }
              }
            }

            .img-info {
              display: flex;

              .hotel-img {
                width: 154rpx;
                height: 154rpx;
                margin-right: 20rpx;
                border-radius: 5rpx;
              }

              .hotel-right {
                flex: 1;
                display: flex;
                flex-direction: column;

                .title {
                  margin-bottom: 10rpx;
                  font-weight: 600;
                }
              }
            }
          }
        }
      }
    }
  }

  .scroll-x-box {
    white-space: nowrap;
    width: 600rpx;
  }

  .scroll-view-item {
    display: inline-block;
    white-space: pre-wrap;
    width: 280rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    margin-right: 10rpx;
    background: #f4f8ff;
  }

  .scroll-view-item-info.active {
    background: #fff2ec;
    color: #ff4f01;
  }

  .scroll-view-item-info {
    color: $sl-color-grey;
    width: 280rpx;
    height: 93rpx;
    line-height: 45rpx;
    padding: 0 4rpx;
    font-size: 28rpx;
  }

  .scroll-view-item-info.line93 {
    text-align: center;
    line-height: 93rpx;
  }

  .ticket-type {
    font-size: 32rpx;
    font-weight: 600;
    color: $sl-color-black;
  }

  .more {
    width: 694rpx;
    height: 85rpx;
    border-radius: 10rpx;
    color: #767697;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      width: 24rpx;
      height: 24rpx;
      margin-left: 4rpx;
    }
  }

  .equipment {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    view {
      padding: 0 4rpx;
      height: 30rpx;
      text-align: center;
      line-height: 30rpx;
      font-size: 21rpx;
      color: #0b4d8f;
      margin: 5rpx 8rpx 0 0;
      border: 1px solid #cccccc;
    }
  }

  .info-text-1 {
    color: #666666;
    font-size: 24rpx;
    padding: 3rpx 0;
  }

  .info-text-2 {
    color: #666666;
    font-size: 21rpx;
    display: flex;
    align-items: center;
    padding: 3rpx 0;
  }

  .sale-number {
    color: #767697;
    font-size: 24rpx;
  }

  .tag-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    flex-wrap: wrap;
    margin-top: 18rpx;

    .tag-text {
      font-size: 24rpx;
    }

    .tag-line {
      color: $sl-color-grey;
      padding: 0 8rpx;
      font-size: 24rpx;
    }

    .tag-text.active1 {
      color: #f2a81e;
    }

    .tag-text.active2 {
      color: #77769a;
    }

    .tag-text.active3 {
      color: #5876d6;
    }
  }
}

.table-title{
  color: #131328;
  font-weight: bold;
  font-size: 36rpx;
  padding: 30rpx 28rpx;
}
.list-tab-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 100rpx;
  justify-content: flex-start;
  padding: 0 24rpx 14rpx 24rpx;
  margin-bottom: 8rpx;
  overflow-x: auto;
  white-space: nowrap;

  .list-tab {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    height: 65rpx;
    margin: 32rpx 72rpx 0 0;

    .tab-name {
      color: $sl-color-grey;
      font-size: 32rpx;
    }

    .tab-name.active {
      font-size: 36rpx;
      font-weight: 600;
      color: $sl-color-black;
    }

    .tab-border {
      width: 65rpx;
      height: 7rpx;
      background: #fff;
      border-radius: 4rpx;
    }

    .tab-border.active {
      background: linear-gradient(135deg, #fec901 0%, #ff4c00 100%);
    }

    .tab-img {
      width: 46rpx;
      height: 14rpx;
      // margin-top: 8rpx;
      position: absolute;
      bottom: -8rpx;
    }
  }
}
.list-date {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24rpx;
  flex-wrap: wrap;
  min-height: 50rpx;
  margin-bottom: 10rpx;
  .date-box {
    height: 47rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #404062;
    padding: 0 21rpx;
    background: #FFFFFF;
    border: 1rpx solid #fff;
    margin: 0 12rpx 0rpx 0;
    border-radius: 10rpx;
    .icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .date-box.active {
    color: #5876D6;
    background: #E5EBFF;
    border: 1rpx solid #7696FF;
    border-radius: 10rpx;
  }
}

.instructions {
  z-index: 1001;
  position: relative;
}

.calendarBox {
  height: 800rpx;
  border-radius: 30rpx 30rpx 0 0;
  background: #ffffff;
}

.calendarTitle {
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #222222;
  font-size: 32rpx;
  border-radius: 30rpx 30rpx 0 0;
}

.more-scroll-view {
  max-height: 600rpx;
}

.moreBox {
  width: 690rpx;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  margin: 8rpx auto;
  display: flex;
  align-items: center;
  padding-left: 52rpx;
}

.more-popup {
  max-height: 800rpx;
  min-height: 600rpx;
  border-radius: 30rpx 30rpx 0 0;
  background: #ffffff;
}
.movable-po {
    position: absolute;
    // z-index: 9999;
    top: 20%;
    width: 1rpx;
    height: 600rpx;
}
.po-top-r {
  overflow: hidden;
	position: fixed;
	top: 50%;
	left:20rpx;
	z-index: 9999;
	width: 180rpx;
	height: 180rpx;
  transition: width 0.5s ease,height 0.5s ease;
	.po-button {
		width: 180rpx;
		height: 180rpx;
    padding: 0;
    border: none;
    transition: all 0.5s ease;
    &.active{
      width: 90rpx;
	    height: 90rpx;
      padding: 0;
      border: none;
    }
	}
  &.active{
    left: -20rpx;
    width: 90rpx;
	  height: 90rpx;
  }
}

.notice-box {
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto;
  padding: 0 24rpx 0 24rpx;
  width: 100%;
}

.notice-box .notice-title {
  color: $sl-color-black;
  padding: 39rpx 0 0 0;
  font-size: 32rpx;
  font-weight: 600;
}

.notice-box .notice-footer {
  width: auto;
  height: 40rpx;
}

.notice-txt {
  font-weight: 400;
  line-height: 40rpx;
  padding-top: 19rpx;
  font-size: 28rpx;
  color: $sl-color-dark-grey;
}
.int-flex-box {
  display: flex;

  .int-flex-box-title {
    width: 150rpx;
    color: #272727;
    font-size: 28rpx;
    font-weight: bold;
    padding: 0 20rpx 0 0;
  }

  .int-flex-box-title.active {
    width: 280rpx;
  }

  .int-flex-box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    color: #4d4d4d;

    .sItem-box {
      margin-bottom: 20rpx;

      .sItem-1 {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .sItem-2 {
        font-size: 28rpx;
      }
    }
  }
}
.chat-box{
  width: 694rpx;
  height: 276rpx;
  background: #FFFFFF;
  border-radius: 26rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  .chat-title{
    width: 650rpx;
    margin: 0 auto;
    // height: 96rpx;
    display: flex;
    align-items: center;
    padding: 20rpx 0 22rpx 0;
    .title-item{
      color: #131328;
      font-size:32rpx;
      font-weight: 600;
    }
  }
  .chat-scroll{
    width: 650rpx;
    margin: 0 auto;
    overflow-x: auto;
    white-space: nowrap;
    .scroll-item{
      display: inline-block;
      width: 248rpx;
      height: 168rpx;
      margin-right:14rpx;
      border-radius: 16rpx;
      position: relative;
      .scroll-img{
        width: 248rpx;
        height: 168rpx;
        border-radius: 16rpx;
        overflow: hidden;
      }
      .mask-model{
        width: 248rpx;
        height: 48rpx;
        background: rgba(19,19,40,0.16);
        border-radius: 0rpx 0rpx 16rpx 16rpx;
        backdrop-filter: blur(10px);
        position: absolute;
        bottom: 0;
        left: 0;
        line-height: 48rpx;
        padding: 0 0 0 20rpx;
        color:#fff;
        font-size: 24rpx;
      }
    }
  }
}
.is-sticky{
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}
</style>
